App.require(["canvasTool"], function (canvasTool) {
    var app = App.getCurrent();

    app.defineLayer("str-marker-layer", {
        render: function (next) {
            this.initProperty();
            this.fetch("./index.html", function (text) {
                next(this.renderHTML(text));
            });
        },
        initProperty: function () {
            var property = this.property;

            property.id = property.id || this.uid;

            this.setMarkerOption(property.id);
            this.data.attributeStr = this._createPropertyStr(property);
            if (property.animation) this.addPropertyAnimation(property.animation, this);
            this._offset = { x: 0, y: 0 };
        },
        get rotate() {
            return this.getValue("rotate");
        },
        set rotate(value) {
            return this.setValue("rotate", value);
        },
        set offset(value) {
            if (this.setValue("offset", value)) {
                this.resetOption();
            }
        },
        get offset() {
            return this.getValue("offset");
        },
        get width() {
            return this.getValue("width");
        },
        set width(value) {
            if (this.setValue("width", value)) {
                this.resetOption();
            }
        },
        get height() {
            return this.getValue("height");
        },
        set height(value) {
            if (this.setValue("height", value)) {
                this.resetOption();
            }
        },
        get animation() {
            return this.getValue("animation");
        },
        set animation(value) {
            if (this.setValue("animation", value)) {
                if (value) this.addPropertyAnimation(value, this);
            }
        },
        set transition(value) {
            this.setValue("transition", value);
        },
        get transition() {
            return this.getValue("transition");
        },
        set opacity(value) {
            this.setValue("opacity", value);
        },
        get opacity() {
            return this.getValue("opacity");
        },
        draw: function () {
            return true;
        },
        isPointInPath: function (ctx, x, y, ratio, option) {
            return this.components.some(function (item) {
                var comProperty = {};
                item.data.isInstance = true;
                for (var key in option) {
                    if (key !== "marker") {
                        comProperty[key] = item.property[key];
                        item[key] = option[key] || item.property[key];
                    }
                }
                var isIn = item.containsBounds(ctx, x, y, ratio);
                for (var key in comProperty) {
                    item[key] = comProperty[key];
                }
                item.data.isInstance = true;
                return isIn;
            })
        },
        dispose: function () {
            this.removeAnimation();
            this.data.isChange = true;
        },
        resetOption: function () {
            var property = this.property;
            var parentCanvas = this._getCanvas();
            parentCanvas.resetMarkerById(property.id);
            var components = parentCanvas.getUseMarkers(property.id);
            if (!components) return;
            for (var i = 0; i < components.length; i++) components[i].data.isChange = true;
        },
        drawToCanvas: function (ctx, ratio, option) {
            option = option || {};
            var components = this.components;
            var dObj = this.getPropertyUse(["offset", "width", "height", "opacity"]);
            var offset = this.createOffsetObj(dObj.offset, ratio, this._offset);
            ctx.translate(offset.x, offset.y);
            for (var i = 0; i < components.length; i++) {
                var com = components[i];
                var comProperty = {};
                com.data.isInstance = true;
                for (var key in option) {
                    if (key !== "marker") {
                        comProperty[key] = com.property[key];
                        com[key] = option[key] || com.property[key];
                    }
                }

                if (typeof com.draw === "function") com.draw(ctx, ratio, option, true);
                
                for (var key in comProperty) {
                    com[key] = comProperty[key];
                }
                com.data.isInstance = false;
            }
        }
    })
})